<template>
  <div class="layout-col flex3 ml15 bs">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
        <span class="f15 fw ml8">计划开锁任务统计</span>
      </div>
      <div class="flex-sc i21 cursor" @click="exposeRef.onVisable({})" v-if="!isNull(configStore.user) && configStore.user.function_role == '1'">
        <i-ep-circlePlusFilled class="f16 mr5" /><span>新建任务</span>
      </div>
    </div>
    <div class="row bgi22">
      <div :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i" v-show="v.show" :class="typeof(v.key) == 'object'?v.width +' '+ 'mlr5':v.width">{{v.name}}</div>
    </div>
    <div class="table">
      <div class="row" :class="state.actIndex==index? 'active' : index%2 == 1?'bgi23':'bgi18'" v-for="(item, index) in state.list" :key="index" @click.stop="handleClick('active', item, index)">
        <div v-show="v.show" :class="v.width" :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i">
          <span class="i21 cursor mlr5" 
          v-if="typeof(v.key) == 'object' && !isNull(configStore.user)" 
          v-for="(vv, kk, ii) in v.key" :key="ii" 
          @click.stop="handleClick(kk, item)"
          :class="kk=='start'&&item['status']!=0?'none'
          :kk=='complete'&&item['status']!=1?'none'
          :kk=='cancel'&&item['status']>1?'none'
          :''"
          >{{vv}}</span>
          <span v-else-if="v.key=='*'">{{index+1}}</span>
          <span v-else-if="v.type == 'time'">{{item[v.key] == 0?'/':parseTime(item[v.key])}}</span>
          <span v-else-if="v.type == 'find'" :class="find(v.value[0], [v.value[1], item[v.key]], 'color')?find(v.value[0], [v.value[1], item[v.key]], 'color'):''">
            {{find(v.value[0], [v.value[1], item[v.key]], v.value[2])}}
          </span>
           <span v-else-if="v.key == 'num'|| v.key == 'num2'">{{item[v.key] == '-1'?'多次':item[v.key]}}</span>
          <span v-else>{{isNull(item[v.key]) && v.key!=''? '/' : item[v.key]}}</span>
        </div>
      </div>
      <div v-if="state.empty" class="flex-cc ww100 tc ptb13 bgi18">没有数据</div>
    </div>
    <Pagination class="plr20" v-show="state.total>0" :total="state.total" v-model:page.sync="state.page" v-model:limit.sync="state.limit" @pagination="init" />
    <add @init="init" ref="exposeRef" />
  </div>
</template>

<script lang="ts" setup>
  import api from '@/api'
  import Pagination from '@/components/Pagination'
  import add from "@/views/async/lock/add";
  const { proxy }: any = getCurrentInstance();
  const publicStore = proxy.publicStore();
  const configStore = proxy.configStore();
  let statusList = $ref([
    {value: '0', name: '未开始', color: 'ca'},
    {value: '1', name: '进行中', color: 'i21'},
    {value: '2', name: '已完成', color: 'i6'},
    {value: '3', name: '已取消', color: 'ca'},
  ])
  const state = reactive({
    ...publicStore.$state,
      key: 'id',
      query: {"o": "o_sensor_access"},
      content: [
      // { width: 'w70',   show: true, align: 'center', key: '*', name: '序号' },
      { width: 'w50x2', show: true, align: 'left', key: 'name', name: '任务名称' }, 
      { width: 'w50x3', show: true, align: 'left', key: 'userName', name: '操作人员' }, 
      { width: 'w50x4', show: true, align: 'left', key: 'start_time',  name: '开始时间', type: 'time' },
      { width: 'w50x4', show: true, align: 'left', key: 'end_time', name: '结束时间', type: 'time' },
      { width: 'w50x3', show: true, align: 'left', key: 'sensor_name',  name: '门禁' },
      { width: 'w50x2', show: true, align: 'center', key: 'num', name: '开锁次数' },
      { width: 'w50x2', show: true, align: 'center', key: 'status', name: '状态', type: 'find', value: [statusList, 'value', 'name'] },
      { width: 'flex1', show: true, align: 'right', key: {start: '开始', complete: '完成', cancel: '取消'},  name: '操作' },
    ]
  });
  let exposeRef = $ref()

  onMounted(async() => {
    init()
  })

  watch(() => configStore.user, async (val) => {
    state.page = 1
    init()
  },{ immediate: false, deep: true });

  watch(() => publicStore.isTrue, async (val) => {
    init()
  },{ immediate: false, deep: true });

  // watch(() => publicStore.list, async (val) => {
  //   state.content[4].value[0] = publicStore.list
  // },{ immediate: false, deep: true });

  const init = async () => {
    getQuery()
    state.params = {queryApi: Object.assign({s: (state.page -1)*state.limit, n: state.limit}, state.query), queryApiCount: state.query}
    let res = await publicStore.post(state.params)
    state.list = proxy.isNull(res.queryApi)? [] : res.queryApi
    state.empty = proxy.isNull(res.queryApi)? true : false
    state.total = proxy.isNull(res.queryApiCount)? 0 : parseInt(res.queryApiCount[0].count)
  }

   // 检索条件
  const getQuery  = () => {
    if(!proxy.isNull(configStore.user) && configStore.user.function_role != '1'){
      state.query.i = 3
      state.query.p = [publicStore.distributId, configStore.user.id]
    }else{
      state.query.i = 0
      state.query.p = [publicStore.distributId]
    }
  }

  const handleClick = (remark, item, index) => {
    // if(!proxy.isNull(publicStore.current) && remark == 'start') return ElNotification({ title: '提示', message: '请完成其他任务', type: 'error' })
    let form = Object.assign({}, item)
    if(remark == 'active') return
    if(remark == 'start') form.status = '1'
    if(remark == 'complete') form.status = '2'
    if(remark == 'cancel') form.status = '3'
    form.o = 'o_sensor_access'
    form.t = 'upd'
    form.a = '更新'
    console.log('form', form)
    ElMessageBox.confirm('是否确定此操作?', '提示！', {
      confirmButtonText: '确定',
      cancelButtonText: '关闭',
      type: 'error'
    }).then(async() => {
      api.updateApi([form]).then((res) => {
        if(res.errcode == 0){
          ElNotification({ title: '提示', message: '操作成功', type: 'success' })
          publicStore.isTrue = !publicStore.isTrue
        }
      })
    })
  }

</script>

<style scoped lang="scss">

</style>
  